<template>
    <div>
        <div v-if="modelShow" class="model">
            <div class="box">
                <div class="modelList">
                    <ul>
                        <li v-for="(item,index) of callData" :key="index">
                            <div class="modelT">
                                <div class="modelL">
                                    <img src="@/assets/img/classExpense/defult.png" alt="">
                                    <span>{{item.studentName}}</span>
                                </div>
                                <div class="modelR" v-if="item.payState == 1">
                                    <img src="@/assets/img/classExpense/type-3.png" alt="">
                                    <span>已交</span>
                                </div>
                            </div>
                            <p class="modelP">交纳人：{{item.payorName}}</p>
                            <p class="modelP" v-if="item.completeTime">交纳时间：{{item.completeTime}}</p>
                            <p class="modelP" v-else>交纳时间：--</p>
                            <p class="modelP">交纳金额：{{item.currency}}</p>
                            <div class="jiaoBtn" @click="showMessge(item)" v-if="item.payState != 1 && !item.isExpires && isShow">催缴</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="deleteBox">
                <img @click="hide" src="@/assets/img/classExpense/cha.png" alt="">
            </div>
        </div>
        <!-- 提示弹窗 -->
        <div class="messge" v-if="isMessge">
             <div class="messgeWin"></div>
             <div class="messgeCont">
                 <img src="@/assets/img/classExpense/type-5.png" alt="">
                 <p>提示已发出</p>
             </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isMessge:false,
            callData:''
        }
    },
     props:{
        modelShow:{
            type:Boolean,
            default:true
        },
        listData:{
            type: Object,
            default: {}
        },
        isShow:{
            type:Boolean,
            default:false
        },
    },
    computed: {
        schoolId () {
            return this.$store.getters['user/schoolId']
        },
        gradeId () {
            return this.$store.getters['user/gradeId']
        },
        classId () {
            return this.$store.getters['user/classId']
        },
        loginUserId () {
            return this.$store.getters['user/loginUserId']
        }
    },
    mounted() {
        console.log(this.listData)
        this.getDetailList()
    },
    methods: {
        hide () {
            this.$emit('hide')
        },
        save () {
            this.$emit('hide')
        },
        // 明细列表
        getDetailList(){
            var params = {
                SchoolId: this.schoolId,
                PayState:0,
                GradeId: this.gradeId,
                ClassId: this.classId,
                PageNum: 1,
                PageSize: 500,
                IsMobileTeacherOrderby: true,
                RecordCollectionClassFare_Id: this.listData.id
            }                              
            this.$store.dispatch('classFee/RecordStudentClassFare', params).then( res => {
                this.callData = res.items
            })
        },
        // 催缴 
        showMessge(item){
            var params = {
                id:item.id
            }
            this.$store.dispatch('classFee/SendWeChatMsgForSingle', params).then( res => {
                 this.isMessge = true
                setTimeout(() =>{
                    this.isMessge = false
                    }, 1000)
            })
       },
    },
}
</script>
<style src="./css/classFee.css" scoped>

</style>